<template>
  <div class="kg-portal">
    <div class="kg-header flex justify-center">
      <search-comp></search-comp>
    </div>
    <div class="kg-body">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="知识社区" name="first">
          <kg-community></kg-community>
        </el-tab-pane>
        <el-tab-pane label="知识目录" name="second">
          <manage :tab-data="tabsData" :detail-edit="false"></manage>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import manage from "@/views/manageKg/components/manage.vue";
import kgCommunity from "./components/kg-community.vue";

const tabsData = reactive([
  {
    id: 1,
    name: "分类",
    isShow: true,
  },
  {
    id: 2,
    name: "实体",
    isShow: true,
  },
  {
    id: 3,
    name: "事件",
    isShow: true,
  },
]);
defineOptions({
  name: "kgKnowledgePortal",
});
import SearchComp from "./search-comp.vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped lang="scss">
.kg-portal {
  margin: 0 !important;

  .kg-header {
    width: 100%;
    height: 236px;
    background: url("./../../assets/images/kg-portal/banner@2x.png") no-repeat;
    background-position: 0% 80%;
    background-size: 100%;
  }

  .kg-body {
    padding: 0 10px;
    margin: -72px 100px 10px;
    background: #ffff;
    border-radius: 4px;

    & ::v-deep {
      .el-tabs__nav-wrap {
        line-height: 72px;
      }
    }
  }
}
</style>
